<template>
  <!-- <router-link :to="'/product/' + product.sku" class="product-card"> -->
  <div class="product-card">
      
    <van-checkbox class="my-checkbox" icon-size="18px" checked-color="#fe5b33" :checked="product.checked" @click="checked"></van-checkbox>
    <router-link :to="'/product/' + product.sku" class="img"><img :src="product.img" /></router-link>
    <div class="details">
      
      <van-icon class="cross" name="cross" />
      <router-link :to="'/product/' + product.sku" class="product-name">{{ product.name }}</router-link>
      <div class="price">
        <span class="product-price">￥{{ product.price }}</span>
        <div class="modifynum">
            <van-icon class="updatanum addnum" name="plus" @click="add" />
            <span class="product-num">{{
            product.num
            }}</span>
            <van-icon class="updatanum delnum" name="minus"  @click="del"/>
        </div>
      </div>
    </div>
  </div>
  <!-- </router-link> -->
</template>
<script>
import { toRefs } from "vue";
export default {
  props: {
    product: {
      type: Object,
    },
    keys: {
      type: Number,
    },
  },
    setup(props,{emit}) {
    const add= ()=>{
            emit('modify',{flag:"add",keys:props.keys})
        };
        const del= ()=>{
            emit('modify',{flag:"del",keys:props.keys})
        };
        const checked= ()=>{
            emit('modify',{flag:"checked",keys:props.keys})
        };
    return { ...toRefs(props),add,del,checked };
  },
};
</script>
<style lang="scss" scoped>
.product-card {
  display: flex;
  margin: 20px 10px;
background: #fff;
padding: 10px 5px;
border-radius: 12px;
  .img {
    margin-left: 5px;
    flex: 1;
    img {
      width: 100%;
      border-radius: 5px;
    }
  }
  .details {
    flex: 2;
    margin-left: 10px;
    font-size: 14px;
    .cross{
      float: right;
    padding: .5rem;
    color: #d0d0d0;
    }
    .product-name {
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-height: 20px;
      color: #222333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
          margin-top: 1rem;
    }
    .modifynum{
        display: flex;
        width: 70px;
        line-height: 22px;
        justify-content: space-evenly;
        .updatanum{
            border: 1px solid #aaa;
            padding: 0px 4px;
            line-height: 20px;
            font-size: 1rem;
            color: #aaa;
        }
        .addnum{
            border-radius: 8px 0px 0px 8px;
        }
        .delnum{
            border-radius: 0px 8px 8px 0px;
        }
    }
    .product-price{
        color: #fe5b33;
    }
    .price {
      margin-top: 40px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>